<template>
  <!-- 欢迎新成员列表页面 -->
  <view class="main">
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/aliang/navigation.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_"> 欢迎新成员 </view>
      <view class="right_"></view>
    </view>
    <!-- 成员列表 -->
    <view
      class="greet"
      v-for="(item, index) in welcomeNewMemberList"
      :key="index"
    >
      <view class="header">
        {{ item.showTime }}
      </view>
      <!-- <view > -->
      <navigator
        :url="'/pages/index/personal?id=' + item.userId"
        class="center"
        hover-class="none"
      >
        <view class="left">
          <view class="tou">
            <image
              class="touxiang"
              :src="item.avatarUrl"
              mode="aspectFill"
            ></image>

            <!-- 大v标识 -->
            <image
              src="../../imges/various.png"
              mode="aspectFill"
              class="verified"
              v-if="item.verified"
            ></image>
          </view>
          <view class="abstract">
            <view class="abstract_top">
              <text class="name">{{ item.applyName }}</text>
              <text class="phone" v-if="item.isTelphone != 1 && item.telphone"
                >手机：{{ item.telphone }}</text
              >
            </view>
            <view class="bott">
              <text class="company">{{ item.company }}</text>
              <text class="position" v-if="item.post">{{ item.post }}</text>
              <text class="city">{{ item.cityName }}</text>
            </view>
          </view>
        </view>
      </navigator>

      <view class="tc" v-if="item.specialty && item.specialty != 'null'">
        特长：<text>{{ item.specialty }}</text>
      </view>
      <view class="xq" v-if="item.demand && item.demand != 'null'">
        需求：<text>{{ item.demand }} </text>
      </view>
      <!-- 欢迎列表(可跳转) -->
      <view
        class="welcomeList"
        v-if="item.thumbsList.length != 0 && item.isUserId"
      >
        <navigator
          :url="'/pages/index/personal?id=' + v.userId"
          v-for="(v, i) in item.thumbsList"
          :key="i"
        >
          <image :src="v.avatarUrl" mode="aspectFill"></image>
        </navigator>
      </view>

      <!-- 欢迎列表(不可跳转) -->
      <view
        class="welcomeList"
        v-if="item.thumbsList.length != 0 && !item.isUserId"
      >
        <view v-for="(v, i) in item.thumbsList" :key="i">
          <image :src="v" mode="aspectFill"></image>
        </view>
      </view>

      <view
        :class="[
          item.thumbsList.length == 0
            ? 'greet_bottom greet_bottomNo'
            : 'greet_bottom',
        ]"
      >
        <view class="bottom_left">
          <view
            class="huan"
            @tap="handleHuanying(item.id, item.isThumbs, item)"
          >
            <image
              class="huanying"
              src="../../images/circle/hy.png"
              mode="aspectFill"
              v-if="item.isThumbs == 0"
            ></image>
            <image
              class="huanying"
              src="../../images/aliang/guzhang_1.png"
              mode="aspectFill"
              v-if="item.isThumbs == 1"
            ></image>
            <text :class="[item.isThumbs == 1 ? 'text1 text2' : 'text1']"
              >欢迎</text
            >
            <text
              v-if="item.thumbsCount != 0"
              :class="[item.isThumbs == 1 ? ' text2' : '']"
              >{{ item.thumbsCount }}</text
            >
          </view>
        </view>
        <view class="bottom_right" @tap="handleOpenShare(item.userId, item)">
          <image
            src="../../images/aliang/fenxiang_icon.png"
            mode="aspectFill"
          ></image>
        </view>
      </view>
      <view class="bottom_xian"> </view>
    </view>
    <view class="bottom_footer"> 只显示近一个月的新成员哦～ </view>

    <view class="fenxiang_" v-if="is_Share" @tap="closeShare">
      <view class="content_">
        <view class="left_">
          <view class="one_"> 请点击右上角按钮“···” </view>
          <view class="two_"> 发送给好友，分享到朋友圈 </view>
        </view>
        <view class="right_">
          <image
            src="../../images/aliang/fenxiang.png"
            mode="aspectFill"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
var jweixin = require("jweixin-module");
export default {
  data() {
    return {
      pageSize: 10,
      orgId: "",
      shareId: "",
      welcomeNewMemberList: [
        {
          thumbsList: [],
        },
      ],
      bottom: false,
      noMore: false,
      isShow: true,
      is_Share: false,
      isShare: 0,
      realName: "", //我的名字
      qzData: {}, //圈子数据
    };
  },
  onPullDownRefresh() {
    this.bottom = false;
    this.pageSize = 10;
    setTimeout(() => {
      this.handleList();
      uni.stopPullDownRefresh();
      uni.showToast({
        title: "刷新成功",
        duration: 2000,
        icon: "none",
      });
    }, 1000);
  },
  onReachBottom() {
    if (!this.isShow) {
      return false;
    }
    uni.showLoading({
      title: "加载中",
    });
    this.pageSize = this.pageSize + 10;
    this.bottom = true;
    this.handleList();
  },
  onShow() {
    this.is_Share = false;
  },
  onLoad(options) {
    this.orgId = options.id;
    this.shareId = options.shareId;
    if (options.isShare == 1) {
      this.isShare = 1;
    }
    let token = uni.getStorageSync("token");
    if (token && this.isShare == 1) {
      this.qzDataList();
      return false;
    } else if (token && this.isShare == 0) {
      this.realName = uni.getStorageSync("personal").realName;
      this.qzDataList();
      this.handleList();
    } else if (this.isShare == 1 && !token) {
      //没token
      uni.redirectTo({
        url: "/pages/circle/Introduce?id=" + this.orgId + "&isShare=1",
      });
    }
  },
  methods: {
    handleOpenShare(userId, itemData) {
      //打开分享
      //分享功能
      let that = this;
      that.is_Share = true;
      request({
        url: "h5/login/jsapiSignature",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7, //post一定要带这个header，被这里坑了半天
        },
        data: {
          url: window.location.href.split("#")[0],
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          jweixin.config({
            debug: false,
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
          });

          jweixin.ready(function () {
            let imgZ = that.qzData.orgUrl;
            let titleZ =
              "欢迎" +
              itemData.applyName +
              itemData.company +
              itemData.post +
              "加入了" +
              that.qzData.orgName;
            let linkZ =
              that.globalData.domain +
              "/pages/index/welcomeNewMember?isShare=1&id=" +
              that.orgId +
              "&shareId=" +
              userId;
            let descZ = that.realName + "分享了新成员加入圈子动态，邀请你来看";
            jweixin.updateTimelineShareData({
              title: titleZ, //分享标题
              desc: descZ, // 分享描述
              link: linkZ, //分享链接
              imgUrl: imgZ, //分享图标
            });
            jweixin.updateAppMessageShareData({
              title: titleZ, //分享标题
              desc: descZ, // 分享描述
              link: linkZ, //分享链接
              imgUrl: imgZ, //分享图标
            });
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    closeShare() {
      this.is_Share = false;
    },
    handleShareT() {
      //列表分享
      //分享功能
      let that = this;
      request({
        url: "h5/login/jsapiSignature",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7, //post一定要带这个header，被这里坑了半天
        },
        data: {
          url: window.location.href.split("#")[0],
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          jweixin.config({
            debug: false,
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
          });

          jweixin.ready(function () {
            let imgT = that.qzData.orgUrl;
            let titleT = "欢迎新成员加入了" + that.qzData.orgName;
            let linkT =
              that.globalData.domain +
              "/pages/index/welcomeNewMember?isShare=1&id=" +
              that.orgId +
              "&shareId=" +
              that.shareId;
            let descT = that.realName + "分享了新成员加入圈子动态，邀请你来看";

            jweixin.updateTimelineShareData({
              title: titleT, //分享标题
              desc: descT, // 分享描述
              link: linkT, //分享链接
              imgUrl: imgT, //分享图标
            });
            jweixin.updateAppMessageShareData({
              title: titleT, //分享标题
              desc: descT, // 分享描述
              link: linkT, //分享链接
              imgUrl: imgT, //分享图标
            });
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    handleHuanying(id, index, item) {
      //帖子点赞
      let token = uni.getStorageSync("token");
      this.bottom = false;
      let that = this;
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
      } else {
        this.request({
          url: "h5/appUserThumbs/thumbs",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            thumbsId: id,
            type: 20,
            status: index,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.handleList();
            uni.showToast({
              title: "操作成功",
              duration: 1000,
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleList() {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/orgCircle/welcomeNewMemberList",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.orgId,
            shareId: this.shareId,
            pageSize: this.pageSize,
            pageNumber: 1,
          },
        }).then((res) => {
          // console.log(res, '欢迎列表')
          if (res.data.code == 200) {
            this.welcomeNewMemberList = res.data.data.rows;
            if (this.welcomeNewMemberList.length > 0) {
              this.welcomeNewMemberList.map((v) => {
                v.isUserId = false;
                return v;
              });
              this.welcomeNewMemberList.forEach((v) => {
                if (v.thumbsList.length > 0 && v.thumbsList[0].userId) {
                  this.welcomeNewMemberList.forEach((v) => {
                    v.isUserId = true;
                  });
                  return false;
                }
              });
            }

            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              !this.noMore &&
              this.welcomeNewMemberList.length >= res.data.data.total &&
              this.bottom
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 2000,
                icon: "none",
              });
              this.noMore = true;
              return false;
            }
            if (
              this.welcomeNewMemberList.length >= res.data.data.total &&
              this.bottom
            ) {
              uni.hideLoading();
              this.isShow = false;
              uni.showToast({
                title: "没有更多数据了",
                duration: 2000,
                icon: "none",
              });
            } else if (
              this.bottom &&
              this.welcomeNewMemberList.length < res.data.data.total
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 2000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    qzDataList() {
      let token = uni.getStorageSync("token");
      const that = this;
      this.request({
        url: "h5/orgCircle/friendsHomeInfo",
        method: "POST",
        header: {
          "content-type": "application/json;charset=UTF-8",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": this.globalData.apiVersion,
          "Source-Type": 7,
          token: token,
        },
        data: {
          orgId: that.orgId,
        },
      }).then((res) => {
        if (res.data.code == 200) {
          if (that.isShare == 1) {
            if (
              res.data.data.isOrg == 3 ||
              res.data.data.isUserFriendsPay == 1
            ) {
              uni.showToast({
                title: "您还不是圈子成员，请先加入圈子",
                duration: 1000,
                icon: "none",
              });
              setTimeout(() => {
                uni.redirectTo({
                  url:
                    "/pages/circle/Introduce?id=" + that.orgId + "&isShare=1",
                });
              }, 1000);
            } else {
              that.handleList(); //加载圈子数据
              that.qzData = res.data.data;
              setTimeout(() => {
                that.handleShareT(); //掉分享
              }, 1);
            }
          } else {
            that.qzData = res.data.data;
            setTimeout(() => {
              that.handleShareT(); //掉分享
            }, 1);
          }
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 2000,
            icon: "none",
          });
        }
      });
    },
    fanLastPage() {
      //返回上一页
      if (this.isShare == 1) {
        uni.redirectTo({
          url: "/pages/circle/index?id=" + this.orgId + "&share=2",
        });
      } else {
        window.history.go(-1);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-top: 92rpx;

  .bottom_footer {
    padding: 138rpx 0;
    // width: 312px;
    // height: 33px;
    width: 750rpx;
    font-size: 24rpx;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: center;
    color: #999999;
    // line-height: 33px;
  }

  .fenxiang_ {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8888888;
    background: rgba(0, 0, 0, 0.4);

    .content_ {
      width: 690rpx;
      height: 200rpx;
      background: #ffffff;
      border-radius: 8rpx;
      position: absolute;
      top: 30rpx;
      left: 32rpx;
      padding: 46rpx 32rpx;
      padding-right: 56rpx;
      box-sizing: border-box;
      z-index: 8888888;
      display: flex;
      justify-content: space-between;

      .left_ {
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .one_ {
          font-size: 36rpx;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          // text-align: center;
          color: #000000;
        }

        .two_ {
          font-size: 32rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          // text-align: center;
          color: #999999;
        }
      }

      .right_ {
        height: 69rpx;
        width: 70rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .greet {
    width: 100%;
    padding: 0 36rpx;
    padding-top: 36rpx;
    box-sizing: border-box;

    .header {
      font-size: 24rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #999999;
      // line-height: 33px;
    }

    .center {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 28rpx;
      // padding: 36rpx 0 28rpx 0;

      .left {
        display: flex;

        .tou {
          width: 88rpx;
          height: 88rpx;
          position: relative;
          margin-right: 20rpx;

          .touxiang {
            width: 88rpx;
            height: 88rpx;
            border-radius: 4rpx;
          }
          .verified {
            width: 36rpx;
            height: 36rpx;
            position: absolute;
            bottom: -6rpx;
            right: -6rpx;
          }

          .level {
            width: 26rpx;
            height: 26rpx;
            position: absolute;
            bottom: -8rpx;
            right: -8rpx;
          }
        }

        .abstract {
          height: 88rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .abstract_top {
            display: flex;
            align-items: center;

            .name {
              display: inline-block;
              max-width: 250rpx;
              font-size: 32rpx;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: #111111;
              line-height: 45rpx;
              margin-right: 18rpx;
              word-break: break-all;
              word-warp: break-word;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }

          .phone,
          .bott {
            font-size: 24rpx;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #999999;
            line-height: 33rpx;
          }

          .bott {
            display: flex;
            align-items: center;

            .company {
              max-width: 300rpx;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }

            .position {
              margin: 0 26rpx;
              max-width: 100rpx;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }

            .city {
              max-width: 100rpx;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
        }
      }
    }

    .tc,
    .xq {
      margin-top: 40rpx;
      font-size: 30rpx;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      // text-align: left;
      color: #111111;

      .text {
        color: #999;
      }
    }

    .xq {
      margin-top: 16rpx;
    }

    .welcomeList {
      padding-top: 34rpx;
      padding-bottom: 28rpx;
      display: flex;
      flex-wrap: wrap;

      image {
        width: 70rpx;
        height: 70rpx;
        border-radius: 4rpx;
        margin-right: 6rpx;
        margin-top: 6rpx;
      }

      image:nth-child(9n) {
        margin-right: 0;
      }
    }

    .greet_bottom {
      // margin-top: 40rpx;
      height: 43rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 36rpx;

      .bottom_left {
        height: 43rpx;
        display: flex;
        align-items: center;
        position: relative;

        .imgs {
          width: 43rpx;
          height: 43rpx;
          border-radius: 50%;
        }

        .huan {
          display: flex;
          align-items: center;
        }

        .huanying {
          width: 32rpx;
          height: 32rpx;
        }

        text {
          font-size: 24rpx;
          font-family: PingFangSC, PingFangSC-Regular;
          color: #111111;
        }

        .text1 {
          margin-right: 12rpx;
          margin-left: 17rpx;
        }

        .text2 {
          color: #e8950d;
        }
      }

      .bottom_right {
        display: flex;
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }

    .greet_bottomNo {
      margin-top: 40rpx;
    }

    .bottom_xian {
      width: 750rpx;
      height: 14rpx;
      background: #f5f5f5;
      margin-left: -36rpx;
    }
  }

  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    line-height: 92rpx;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .left_ {
      height: 28rpx;
      width: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      width: 18rpx;
    }
  }
}
</style>
